<template>
<page path-name="modal">
    <panel :caption="false" :actions="false">
        <button class="btn btn-default btn-circle" @click="handleModal1">模态框1</button>
        <button class="btn btn-default btn-circle" @click="handleModal2">模态框2</button>
        <button class="btn btn-default btn-circle" @click="handleModal3">模态框3</button>
        <button class="btn btn-default btn-circle" @click="handleModal4">编辑框</button>
    </panel>


    
</page>
<modal id="modal1" :show.sync="showModal1" :width="300" :top="200" :head="false">
    <div>没有头部和操作的模态框</div>
</modal>
<modal id="modal2" :show.sync="showModal2" :head-style="headStyle" title="模态框2">
    <div>
        <button class="btn btn-default btn-circle" type="button" @click="headStyle='default'">default</button>
        <button class="btn btn-primary btn-circle" type="button" @click="headStyle='primary'">primary</button>
        <button class="btn btn-success btn-circle" type="button" @click="headStyle='success'">success</button>
        <button class="btn btn-info btn-circle" type="button" @click="headStyle='info'">info</button>
        <button class="btn btn-warning btn-circle" type="button" @click="headStyle='warning'">warning</button>
        <button class="btn btn-danger btn-circle" type="button" @click="headStyle='danger'">danger</button>
    </div>
</modal>
<modal id="modal3" :show.sync="showModal3" :head-style="headStyle" title="有关闭按钮的模态框" type="detail">
    <div>
        <button class="btn btn-default btn-circle" type="button" @click="headStyle='default'">default</button>
        <button class="btn btn-primary btn-circle" type="button" @click="headStyle='primary'">primary</button>
        <button class="btn btn-success btn-circle" type="button" @click="headStyle='success'">success</button>
        <button class="btn btn-info btn-circle" type="button" @click="headStyle='info'">info</button>
        <button class="btn btn-warning btn-circle" type="button" @click="headStyle='warning'">warning</button>
        <button class="btn btn-danger btn-circle" type="button" @click="headStyle='danger'">danger</button>
    </div>
</modal>
<modal id="modal4" :show.sync="showModal4" @save="handleSave" :head-style="headStyle" :rules="rules" :messages="messages" title="编辑框" type="edit" :saveing.sync="save">
    <div  class="form-horizontal">
        <div class="form-body">
            <div class="form-group form-md-line-input">
                <label class="col-md-2 control-label" for="form_control_1">测试1</label>
                <div class="col-md-10">
                    <input type="text" class="form-control" name="name1" id="form_control_1" placeholder="">
                    <span class="help-block">错误提示</span>
                    <div class="form-control-focus">
                    </div>
                </div>
            </div>
            <div class="form-group form-md-line-input">
                <label class="col-md-2 control-label" for="form_control_2">测试2</label>
                <div class="col-md-10">
                    <input type="text" class="form-control" name="name2" id="form_control_2" placeholder="">
                    <span class="help-block">错误提示</span>
                    <div class="form-control-focus">
                    </div>
                </div>
            </div>
        </div>
    </div>
</modal>

</template>
<script>
import {Page, Panel, Modal} from '../../../src/components'

export default{
    components:{
        Page,
        Panel,
        Modal
    },
    data(){
        return {
            path: '',
            showModal1: false,
            showModal2: false,
            showModal3: false,
            showModal4: false,
            headStyle: '',
            save: false,
            rules:{
                name1:{
                    required: true
                },
                name2:{
                    required: true
                }
            },
            messages:{
                name1:{
                    required: '必须填写'
                },
                name2:{
                    required: '必须填写'
                }
            }
        }
    },
    route:{
        data({to:{path}}){
            this.path = path
        }
    },
    methods:{
        handleModal1(){
            this.showModal1 = true

            setTimeout(()=>{
                this.showModal1 = false
            },3000)
        },
        handleModal2(){
            this.showModal2 = true
        },
        handleModal3(){
            this.showModal3 = true
        },
        handleModal4(){
            this.showModal4 = true
        },
        handleSave(data){
            console.log(data)

            setTimeout(()=>{
                this.save = false
                this.showModal4 = false
            },500)
        }
    }
}
</script>